{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>代码</li>
  </ol>
<section class="demo-section">
<div id="pageContent">








<section><header><h3>内联代码</h3></header><article><div class="example" contenteditable="true">
  <p>通过 <code>&lt;code&gt;</code> 标签内嵌一小段代码。</p>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html" id="code-fhc6b1pomv"><span class="tag">&lt;code&gt;</span><span class="pln">&amp;lt;code&amp;gt;</span><span class="tag">&lt;/code&gt;</span></code></pre><p>通过 <code>.code</code> 来为任何内容应用与代码相同的等宽字体。</p><div class="example code" contenteditable="true">
  <h1 class="code">HelloCode();</h1>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"code"</span><span class="tag">&gt;</span><span class="pln">HelloCode();</span><span class="tag">&lt;/h1&gt;</span></code></pre></article></section>




<section><header><h3>键盘码</h3></header><article><p>使用标签 <code>&lt;kbd&gt;</code> 来显示键盘码。</p><div class="example" contenteditable="true">
  <p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 来复制示例代码，按 <kbd>Ctrl + V</kbd> 来粘贴代码。</p>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="pln">按 </span><span class="tag">&lt;kbd&gt;</span><span class="pln">Ctrl</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> + </span><span class="tag">&lt;kbd&gt;</span><span class="pln">C</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> 来复制示例代码，按 </span><span class="tag">&lt;kbd&gt;</span><span class="pln">Ctrl + V</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> 来粘贴代码。</span></code></pre></article></section>








<section><header><h3>基本代码块</h3></header><article><p>基本代码块包含在<code>&lt;pre&gt;</code>内。</p><div class="example" contenteditable="true">
  <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;p&gt;</span><span class="pln">Hello world!</span><span class="tag">&lt;/p&gt;</span></code></pre>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;pre&gt;&lt;code&gt;</span><span class="pln">&amp;lt;p&amp;gt;Hello world!&amp;lt;/p&amp;gt;</span><span class="tag">&lt;/code&gt;&lt;/pre&gt;</span></code></pre><p>还可以使用<code>.pre-scrollable</code> class，其作用是设置 <code>max-height</code> 为 <code>350px</code>，并在垂直方向展示滚动条。</p><div class="example" contenteditable="true">
  <pre class="pre-scrollable prettyprint prettyprinted" style=""><code><span class="com">// 这是一段较长的代码</span><span class="pln">
</span><span class="com">// 用来演示 .pre-scrollable</span><span class="pln">
</span><span class="com">// 当代码行数超出时会出现垂直滚动条</span><span class="pln">
</span><span class="com">// ============================================================================================================</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> test</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> x </span><span class="pun">=</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> y </span><span class="pun">=</span><span class="pln"> </span><span class="lit">2</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">var</span><span class="pln"> z1 </span><span class="pun">=</span><span class="pln"> x</span><em><span class="pln">x </span><span class="pun">+</span><span class="pln"> </span><span class="lit">2</span></em><span class="lit">x</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> z2 </span><span class="pun">=</span><span class="pln"> y</span><em><span class="pln">y </span><span class="pun">+</span><span class="pln"> </span><span class="lit">2</span></em><span class="lit">y</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> z  </span><span class="pun">=</span><span class="pln"> z1</span><em><span class="pln">z1 </span><span class="pun">+</span><span class="pln"> z2</span></em><span class="pln">z2</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">var</span><span class="pln"> o  </span><span class="pun">=</span><span class="pln"> z</span><em><span class="pln">z </span><span class="pun">+</span><span class="pln"> </span><span class="lit">2</span></em><span class="lit">z</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> p  </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">o</span><span class="pun">/</span><span class="lit">2</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> z</span><span class="pun">*</span><span class="pln">z </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)/</span><span class="pln">o</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> q  </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">o </span><span class="pun">+</span><span class="pln"> p</span><span class="pun">)/</span><span class="pln">z</span><span class="pun">;</span><span class="pln">

  console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">x</span><span class="pun">);</span><span class="pln">
  console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">y</span><span class="pun">);</span><span class="pln">
  console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">z</span><span class="pun">);</span><span class="pln">
  console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">q</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

test</span><span class="pun">();</span></code></pre>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;pre</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pre-scrollable"</span><span class="tag">&gt;</span><span class="pln">
...
</span><span class="tag">&lt;/pre&gt;</span></code></pre></article></section>







<section><header><h3>代码高亮</h3></header><article><p>代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易，在产品中如需要向用户展现代码应该使用代码高亮。</p><p>这里推荐的方案是 <a href="https://github.com/google/code-prettify">Google Code Prettify</a> 实现代码高亮。Google Code Prettify能够自动识别代码语言类型并正确应用语法高亮。</p><p>下面是一个 php 文件的示例：</p><div class="example" contenteditable="true">
  <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="dec">&lt;!doctype html&gt;</span></code></li><li class="L1"><code><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span></code></li><li class="L2"><code><span class="pln">  </span><span class="tag">&lt;head&gt;</span></code></li><li class="L3"><code><span class="pln">    </span><span class="tag">&lt;title&gt;</span><span class="pln">Zentao Design Guidelines</span><span class="tag">&lt;/title&gt;</span></code></li><li class="L4"><code><span class="pln">  </span><span class="tag">&lt;/head&gt;</span></code></li><li class="L5"><code><span class="pln">  </span><span class="tag">&lt;body&gt;</span></code></li><li class="L6"><code><span class="pln">  </span><span class="pun">&lt;?</span><span class="pln">php</span></code></li><li class="L7"><code><span class="pln">    echo </span><span class="str">"hello, world!"</span><span class="pun">;</span></code></li><li class="L8"><code><span class="pln">  </span><span class="pun">?&gt;</span></code></li><li class="L9"><code><span class="pln">  </span><span class="tag">&lt;/body&gt;</span></code></li><li class="L0"><code><span class="tag">&lt;/html&gt;</span></code></li></ol></pre>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 为 pre 增加 prettyprint CLASS --&gt;</span><span class="pln">
</span><span class="tag">&lt;pre</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"prettyprint linenums"</span><span class="tag">&gt;</span><span class="pln">
...
</span><span class="tag">&lt;/pre&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 引入 prettyprint 相关资源 --&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">async</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/prettify/prettify.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 页面导入 prettify.js 后调用 window.prettyPrint 方法来初始化代码高亮效果</span><span class="pln">
window</span><span class="pun">.</span><span class="pln">prettyPrint</span><span class="pun">();</span></code></pre></article></section></div>
</section>
{/block}